<template>
    <div class="Price">
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>当前位置：价格/分成</el-breadcrumb-item>
			<el-breadcrumb-item>{{location}}</el-breadcrumb-item>
		</el-breadcrumb>
		<el-container>
			<!-- 左侧边栏 -->
			<el-aside width="200px">

				<router-link v-for="(item,index) in asideNavs" :key="index" :to="item.path" class="userAsideItem">
					<div @click="tocard(index)">
						<i></i>
						<span>{{item.name}}</span>
					</div>
				</router-link>

			</el-aside>
			<el-main>
				<!-- 卡片内容 -->
				<el-card class="box-card">
					<router-view/>
				</el-card>
			</el-main>
		</el-container>
    </div>
</template>

<script>
export default {
    name:'Price',
	data(){
		return{
			location:'',
			asideNavs:[]
		}
	},
	methods:{
		tocard(x){
			this.location = this.asideNavs[x].name;
		}
	},
	created () {
		var isAdimn = window.atob(this.$cookie.get('isAdimn'));
		if(isAdimn == 'false'){
			this.location = '价格';
			this.asideNavs = [
				{path:'/Price/Drainage',name:'价格'},
				{path:'/Price/Team',name:'我的用户'}
			]
			this.$router.push('/Price/Drainage').catch(err => {err})
		}else if(isAdimn == 'true'){
			this.location = '自定义价格';
			this.asideNavs = [
				{path:'/Price/Custom',name:'自定义价格'},
				{path:'/Price/Agency',name:'代理抽成'},
				{path:'/Price/Team',name:'所有用户'}
			]
			this.$router.push('/Price/Custom').catch(err => {err})
		}
	}
}
</script>

<style scoped>
	.Price{
		height: 100%;
	}
	.el-aside{
		height:calc(100vh - 100px);
		background-color:rgb(38,50,56);
		padding-top: 20px;
	}
    .el-breadcrumb{
      height: 40px;
      font-size: 14px;
      color: #808185;
      line-height: 40px;
      padding-left: 20px;
      background-color: #fff;
    }

.userAsideItem{
    height: 40px;
    line-height: 36px;
    margin: 16px 0;
    display: block;
    color: #fff;
    text-decoration: none;
}
.userAsideItem i{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 10px 0 26px;
}
.userAsideItem span{
    font-size: 16px;
    vertical-align: middle;
}

.router-link-active{
    height: 40px;
    background-color: #000;
    color: #fff;
    border-left: 4px solid #2ad198;
    line-height: 36px;
    margin: 16px 0;
    display: block;
    text-decoration: none;
}
.router-link-active i{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 10px 0 22px;
}
.router-link-active span{
    font-size: 16px;
    vertical-align: middle;
}


	/* 内容 */
	.el-main{
		padding: 0;
		margin-top: 10px;
	}
	.box-card{
		margin: 10px;
	}
</style>